<template>
	<view>
		<view class="topView">
			<view class="flex-column-center">
				<image class="logoImage" src="../../static/common/logo.png" mode=""></image>
				<view class="title">
					明途出行
				</view>
				<view class="xyTitle flex-row-center" style="margin-top: 135px;">
					<image @click="isTongClick()" v-if="isTong" src="/static/common/xz.png" mode=""></image>
					<image @click="isTongClick()" v-if="!isTong" src="/static/common/wxz.png" mode=""></image>
					<text @click="isTongClick()" class="">
						已经同意
					</text>
					<text @click="toUrl('/pages/personalCenter/richText?title=用户协议')" class="baseColor">
						用户协议
					</text>
					<text class="">
						和
					</text>
					<text @click="toUrl('/pages/personalCenter/richText?title=隐私协议')" class="baseColor">
						隐私协议
					</text>
				</view>
				<!--  @click="wxButtonClick()" -->
				<button  open-type='getPhoneNumber' @getphonenumber='getphonenumber' :disabled="!isTong" class="wxButton flex-row-center">
				
					<text class="">
						手机号快捷登录
					</text>
				</button>
				
				
			<!-- 	<button v-if='isTong' open-type='getPhoneNumber' @getphonenumber='getphonenumber' class="wxButton1 "></button> -->

				<view @click="phoneButtonClick()" class="phoneButton flex-row-center">
					<!-- 手机验证码/密码登录 -->
					<text class="">
						手机验证码
					</text>
				</view>
				<view @click="toIndex()" class="xyTitle flex-row-center" style="color: red;">
					顺便看看,暂不登录
				</view>
				

			</view>

		</view>
		
		<uni-popup ref="loginPopup1">
			<view class="loginView flex-column-flex-start" >
				<view @click="closeImageClick()" class="closeImage flex-row-flex-end">
					<!-- <image class="closeImage" src="../../static/close.png" mode=""></image> -->
				</view>
				<view class="flex-column-flex-start">
				<view class="loginTitle1" style="margin: 20rpx;">
					用户隐私保护提示
				</view>
				<view class="loginTitle1" style="margin: 20rpx;">
					感谢您使用本应用，您使用本应用前应当阅并同意
				</view>
				<view @click="openPrivacyContract()" class="loginTitle" style="margin: 20rpx;">
					《用户隐私保护指引》
				</view>
				<view class="flex-row-center">
				
					<button @click="disagreeClick()" class="loginButton2" >不同意</button>
					
					<button class="loginButton2"  open-type="agreePrivacyAuthorization" @agreeprivacyauthorization='agreeprivacyauthorization'>同意</button>
				</view>
				<view class="loginTitle1" style="margin: 20rpx;">
					当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入程序。
				</view>
				</view>
			
			</view>
		</uni-popup>
		
		
		<uni-popup ref="loginPopup">
			<view class="loginView flex-column-flex-start" >
				<view @click="closeImageClick()" class="closeImage flex-row-flex-end">
				</view>
				<view class="flex-column-flex-start1">
					<image class="loginImage" src="/static/login/logo.png" mode=""></image>
						<view class="loginTitle">
							是否同意授权手机登录，便于更好的体验
						</view>
						<view class="flex-row-center" style="margin-top: 30rpx;">
							<button @click="wxButtonClick2()" class="loginButton2" >不同意</button>
							<view class="">
								<button v-if="isTong" class="loginButton2"  open-type='getPhoneNumber' @getphonenumber='getphonenumber'>同意</button>
								<button @click="wxButtonClick1()" v-if="!isTong" class="loginButton2" >同意</button>
								<!-- <view @click="wxButtonClick1()" v-if="!isTong" class="loginButton1">
									
								</view> -->
							</view>
							
							
						</view>
					
				<view class="xyTitle flex-row-center">
					<image @click="isTongClick()" v-if="isTong" src="/static/common/xz.png" mode=""></image>
					<image @click="isTongClick()" v-if="!isTong" src="/static/common/wxz.png" mode=""></image>
					<text @click="isTongClick()" class="">
						同意
					</text>
					<text @click="toUrl('/pages/personalCenter/richText?title=用户协议')" class="baseColor">
						用户协议
					</text>
					<text class="">
						和
					</text>
					<text @click="toUrl('/pages/personalCenter/richText?title=隐私协议')" class="baseColor">
						隐私协议
					</text>
				</view>
				</view>
			
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import uniImUtils from '@/uni_modules/uni-im/common/utils.js';
	//导入uniCloud客户端账户体系，用户信息状态管理模块
	// import {mutations as uniIdMutations} from '@/uni_modules/uni-id-pages/common/store.js';
	import {
		login
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				resolvePrivacyAuthorization:{},
				isShow:false,
				isTong:false,
				userInfo: null,
				border: false,
				title: '定位中...'

			}
		},
		onShow() {
			// this.privacyView()

			// this.getPrivacySetting()
			  
		},
		onLoad() {
			// wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
			//       console.log('触发本次事件的接口是：' + eventInfo.referrer)
			//       // 需要用户同意隐私授权时
			//       // 弹出开发者自定义的隐私授权弹窗
			     
			//       this.resolvePrivacyAuthorization = resolve
			//     })
			
			//     wx.getUserProfile({
			//       success: console.log,
			//       fail: console.error
			//     })
		},

		methods: {
			privacyView(){
				var privacyIsShow = uni.getStorageSync('privacyIsShow')
				if(privacyIsShow){
					this.isShow=privacyIsShow
					if(!this.isShow){
						this.$refs.loginPopup1.open('center')
						return
					}
				}else{
					this.$refs.loginPopup1.open('center')
					return
				}
			},
			getPrivacySetting(){
				if (wx.getPrivacySetting) {
				       wx.getPrivacySetting({
				         success: res => {
				             console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
				             if (res.needAuthorization) {
				              this.isShow=false
									
				             } else{
												 this.isShow=true
				             this.$refs.loginPopup1.open('center')
				             }
				         },
				         fail: () => { },
				         complete: () => { },
				       })
				     } else {
				       // 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
				       this.isShow=false
				     }
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			toIndex(){
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			getphonenumber(e) {
				// console.log(e)
				if(e.detail.errMsg!='getPhoneNumber:ok'){
					return
				}
				let clientInfo = uni.getSystemInfoSync();
				
				login({
						code: e.detail.code,
						deviceId: clientInfo.deviceId,
						uniPlatform: clientInfo.uniPlatform,
						appId: clientInfo.appId
					})	
					.then(res => {
						this.showToast(res.msg)
						uni.setStorageSync('userinfo', res.data.userinfo)
						uni.setStorageSync('token', res.data.userinfo.token)
						// uni-im newToken
						// uniImUtils.login(res.data.newToken).then(res => {
						// 	uniIdMutations.updateUserInfo()
						// })
						
						setTimeout(() => {
							this.toIndex()
						}, 2000)
					})
					.catch(err => {

					})
			},
			isTongClick(){
				if(!this.isTong){
					return
				}
			this.isTong=!this.isTong	
			},
			wxButtonClick2(){					
				this.$refs.loginPopup.close('center')
			},
			wxButtonClick1(){
		
				// this.$refs.loginPopup.open('center')
				this.showToast('请同意协议')
				// uni.reLaunch({
				// 	url:'/pages/index/index'
				// })
			
			},
			wxButtonClick(){
				// var privacyIsShow = uni.getStorageSync('privacyIsShow')
				// if(privacyIsShow){
				// 	this.isShow=privacyIsShow
				// 	if(!this.isShow){
				// 		this.$refs.loginPopup1.open('center')
				// 		return
				// 	}
				// }else{
				// 	this.$refs.loginPopup1.open('center')
				// 	return
				// }
				
				if(!this.isTong){
						this.showToast('请同意协议')
						return
				}
				this.$refs.loginPopup.open('center')
				// this.$refs.loginPopup.open('center')
				// this.showToast('请同意协议')
				// uni.reLaunch({
				// 	url:'/pages/index/index'
				// })

			},
			phoneButtonClick(){
			// var privacyIsShow = uni.getStorageSync('privacyIsShow')
			// if(privacyIsShow){
			// 	this.isShow=privacyIsShow
			// 	if(!this.isShow){
			// 		this.$refs.loginPopup1.open('center')
			// 		return
			// 	}
			// }else{
			// 	this.$refs.loginPopup1.open('center')
			// 	return
			// }
				uni.navigateTo({
					url:'/pages/login/phoneLogin'
				})
			},
			  
				disagreeClick(){
					this.$refs.loginPopup1.close('center')
					uni.setStorageSync('privacyIsShow', false)
				},
			agreeprivacyauthorization(e){
				
				console.log(e)
				this.$refs.loginPopup1.close('center')
				uni.setStorageSync('privacyIsShow', true)
			// this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
			 // this.triggerEvent("disagree")
				// this.getPrivacySetting()
				// this.resolvePrivacyAuthorization({
				// 					buttonId: 'agree-btn',
				// 					event: 'agree'
				// 				})
							
				
			},
			    openPrivacyContract() {
			          wx.openPrivacyContract({
			            success: res => {
			              console.log('openPrivacyContract success')
			            },
			            fail: res => {
			              console.error('openPrivacyContract fail', res)
			            }
			          })
			        }
		}
	}
</script>

<style lang="scss">
	
	.logoImage {
		margin-top: 180px;
		width: 72px;
		height: 72px;
		border-radius: 12px;
	}

	.title {
		margin-top: 12px;
		font-size: 16px;
		color: #333333;
	}
	.wxButton1 {
		margin-top: -50px;
		width: 315px;
		height: 50px;
		border-radius: 25px;
		opacity: 1;
	
		/* 主色 */
		background:#00000000;
	
	}

	.wxButton {
		margin-top: 35px;
		width: 315px;
		height: 50px;
		border-radius: 25px;
		opacity: 1;

		/* 主色 */
		background: $base-color;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 0em;

		color: #FFFFFF;

		image {
			margin-right: 4px;
			width: 20px;
			height: 17px;
		}
	}

	.phoneButton {
		margin-top: 20px;
		width: 315px;
		height: 50px;
		border-radius: 25px;

		/* 主色 */
		background: #26D36033;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 0em;

		/* 主色 */
		color: $base-color;
	}
	.xyTitle{
		margin-top: 30px;
		font-size: 14px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0em;
		
		/* 我已阅读并同意 */
		color: #999999;
		image {
			margin-right: 4px;
			width: 16px;
			height: 16px;
		}
	}
	
	.loginView{
		width: 567rpx;
		height: 550rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.closeImage{
	width: 34rpx;
		height: 34rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	.loginImage{
		margin-top: 20rpx;
		width: 268rpx;
		height: 183rpx;
	}
	.loginTitle{
		margin-top: 32rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: $base-color;
	}
	.loginTitle1{
		// margin-top: 38rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000;
	}
	
	.loginButton{
		margin-top: 10rpx;
		width: 360rpx;
		height: 64rpx;
		background: $base-color;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
	}
	.loginButton2{
		margin-top: 0 10rpx;
		width: 220rpx;
		height: 64rpx;
		background: $base-color;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
	}
	.loginButton1{
		// margin-top: -64rpx;
		width: 220rpx;
		height: 64rpx;
		background: #000000;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		z-index: 999;
	}
	.xzImage{
		margin-top: -34rpx;
		width: 28rpx;
		height: 28rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.xieyi{
		margin-left: 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		// font-weight: 500;
		color: #000000;
	}
	
	
</style>
